<template>
  <div class="process-details">
    <a-card class="card" title="流程详情">
      <a-card class="tab1-card1">
        <a-descriptions :column="3">
          <a-descriptions-item label="流程名称">网络类</a-descriptions-item>
          <a-descriptions-item label="厂商名称"
            >河南众诚信息科技有限公司</a-descriptions-item
          >
          <a-descriptions-item label="所属平台">互联网区</a-descriptions-item>
          <a-descriptions-item label="项目名称"
            >荥阳市智慧党建管理平台项目</a-descriptions-item
          >
          <a-descriptions-item label="所属部门">
            荥阳卫健委
          </a-descriptions-item>
          <a-descriptions-item label="申请类型">
            新打网申请
          </a-descriptions-item>
          <a-descriptions-item label="是否过WAF"> 否 </a-descriptions-item>
          <a-descriptions-item label="申请网络欲求">
            见附件
          </a-descriptions-item>
          <a-descriptions-item label="备注"> 无 </a-descriptions-item>
        </a-descriptions>
        <!-- <a-card class="approval-screenshot-card" title="审批截图">
              <template #extra>
                <a-button>文件上传</a-button>
              </template>
              <a-table></a-table>
            </a-card>
            <a-card title="网络需求">
              <template #extra>
                <a-button>文件上传</a-button>
              </template> 
              <a-table></a-table>
            </a-card> -->
      </a-card>
      <a-card class="tab1-card2">
        <a-steps direction="vertical" :current="current">
          <a-step
            v-for="(item, index) in stepList"
            :key="index"
            :title="item.procPointName"
          >
            <template #description>
              <a-descriptions class="descriptions" :column="3" bordered>
                <a-descriptions-item label="实际办理">
                  {{ item.actualUser }}
                </a-descriptions-item>
                <a-descriptions-item label="候选办理">
                  {{ item.candidateUser }}
                </a-descriptions-item>
                <a-descriptions-item label="接收时间">
                  {{ item.startTime }}
                </a-descriptions-item>
                <a-descriptions-item label="办结时间">
                  {{ item.endTime }}
                </a-descriptions-item>
                <a-descriptions-item label="耗时">
                  {{ item.costTime }}
                </a-descriptions-item>
              </a-descriptions>
              <div class="result">
                <div class="text">
                  状态：<a-tag color="green">{{ item.status }}</a-tag>
                </div>
              </div>
            </template>
          </a-step>
        </a-steps>
      </a-card>
    </a-card>
  </div>
</template>
<script setup lang="ts">
  // 引入组件
  // 引入方法
  import {
    defineProps,
    defineEmits,
    watch,
    onMounted,
    ref,
    nextTick,
  } from 'vue'
  import LogicFlow from '@logicflow/core'
  import '@logicflow/core/lib/style/index.css'
  import api from '@/axios/api.js'
  import { useRoute } from 'vue-router'
  import { message } from 'ant-design-vue'
  import dayjs from 'dayjs'

  const props = defineProps({})
  const emits = defineEmits([])
  // 自定义状态
  const route = useRoute()
  const renderData = ref({
    // 节点数据
    nodes: [
      {
        id: '21', // 节点ID，需要全局唯一，不传入内部会自动生成一个ID
        type: 'rect', // 节点类型，可以传入LogicFlow内置的7种节点类型，也可以注册自定义节点后传入自定义类型
        x: 100, // 节点形状中心在x轴位置
        y: 100, // 节点形状中心在y轴的位置
        text: 'Origin Usage-rect', // 节点文本
        properties: {
          // 自定义属性，用于存储需要这个节点携带的信息，可以传入宽高以重设节点的宽高
          width: 160,
          height: 80,
        },
      },
      {
        id: '50',
        type: 'circle',
        x: 300,
        y: 300,
        text: 'Origin Usage-circle',
        properties: {
          r: 60,
        },
      },
      {
        id: '52',
        type: 'circle',
        x: 600,
        y: 600,
        text: 'Origin Usage-circle',
        properties: {
          r: 60,
        },
      },
    ],
    // 边数据
    edges: [
      {
        id: 'rect-2-circle', // 边ID，性质与节点ID一样
        type: 'polyline', // 边类型
        sourceNodeId: '50', // 起始节点Id
        targetNodeId: '21', // 目标节点Id
      },
      {
        id: 'rect-2-circle', // 边ID，性质与节点ID一样
        type: 'polyline', // 边类型
        sourceNodeId: '50', // 起始节点Id
        targetNodeId: '52', // 目标节点Id
      },
    ],
  })
  const container = ref(null)
  const lf = ref(null)
  const activeKey = ref('1')
  const formFlowRecord = ref({})
  const stepList = ref([])
  let current = ref(0)

  onMounted(() => {
    nextTick(() => {
      if (container.value) {
        lf.value = new LogicFlow({
          container: container.value,
          grid: true,
        })
        lf.value.render(renderData.value)
      }
    })
    console.log('路由参数', route)
    getOrderDetails(route.query.id)
  })
  // 自定义方法
  //获取工单详情
  const getOrderDetails = async data => {
    const res = await api.getOrderDetails(data)
    console.log('获取工单详情', res)
    if (res.status === 200) {
      formFlowRecord.value = res.data.data
      stepList.value = res.data.data.processDetailVO.map((item, index) => {
        return {
          ...item,
          startTime: dayjs(item.startTime).format('YYYY-MM-DD hh:mm:ss'),
          endTime: dayjs(item.endTime).format('YYYY-MM-DD hh:mm:ss'),
        }
      })
    } else {
      message.error(res.data.msg)
    }
    let num = 0
    stepList.value.forEach((item, index) => {
      if (item.status == '已完成') {
        num = num + 1
        current.value = num
      }
    })
    // console.log('current', current.value)
  }
</script>
<style lang="less" scoped>
  .process-details {
    .tab1-card1 {
      margin-bottom: (20 / @vw);
      .approval-screenshot-card {
        margin-bottom: (20 / @vh);
      }
    }
    .tab1-card2 {
      .descriptions {
        margin-bottom: (10 / @vh);
      }
    }
  }
</style>
